extends layout
block content
    img#test-show-hide(src="./qqshow_boy_01.jpg" alt="")
    button#test-toggle 点我
    br
    img#test-show-slide(src="./qqshow_boy_01.jpg" alt="")
    button#test-slideToggle 点我
    img#test-animate(src="./qqshow_boy_01.jpg" alt="")
append scripts
    script.
        //- ================================================================
        // show(), hide(), toggle() 从左上角逐渐展开或收缩
        $('#test-show-hide').hide(3000);  // 3s 内逐渐消失, 参数还可以是 slow, fast
        $('#test-show-hide').show(3000);  // 先消失, 然后又 3s 出现
        $('#test-toggle').click(function(){$('#test-show-hide').toggle(3000)});  // 参数和 hide(), show() 相同
        //- ================================================================
        // slideUp() slideDown() slideToggle() 效果跟拉上窗帘似的
        $('#test-show-slide').slideUp(3000);  //
        $('#test-slideToggle').click(function(){$('test-show-slide').slideToggle(3000)})
        //- ================================================================
        // fadeIn(), fadeOut(), fadeToggle() 淡入淡出, 是通过不断设置 DOM 元素的 opacity 属性来实现
        // animate() 自定义动画, 我们传入的参数就是 DOM 元素最终的 CSS 状态和时间, jQuery 在时间段内不断调整 CSS 直到达到设定的值
        // delay() 方法还可以实现暂停, 这样, 我们可以实现更复杂的动画效果, 而代码却相当简单
        // 串行动画
        $('#test-animate').show(2000)
        .delay(1000)
        .animate({
            width: '256px',
            height: '256px'
        }, 2000)
        .delay(1000)
        .animate({
            width: '128px',
            height: '128px'
        }, 2000);
        // 为什么有的动画没有效果
        // 你可能会遇到, 有的动画如 slideUp() 根本没有效果, 这是因为 jQuery 动画的原理是逐渐改变 CSS 的值, 如 height 从 100px 逐渐变为 0
        // 但是很多不是 block 性质的DOM元素, 对它们设置 height 根本就不起作用, 所以动画也就没有效果
        // 此外, jQuery 也没有实现对 background-color 的动画效果, 用 animate() 设置 background-color 也没有效果
        // 这种情况下可以使用 CSS3 的 transition 实现动画效果
